<template>
	<div style="display: flex;">
		<el-image v-if="face_image"
			style="margin: 0 10px; max-width:150px;max-height:150px;" :src="face_image"
			fit="fil">
		</el-image>
		<div>
			<el-upload action="" :before-upload="beforeImage"
				:on-exceed="onlyImage" :limit="1"
				:auto-upload="false" ref="uploadImage" list-type="picture-card">
				<el-button v-if="face_image" size="small" type="primary">更改照片
				</el-button>
				<el-button v-else size="small" type="primary">上传照片</el-button>
			</el-upload>
			<el-button size="small" plain type="info" @click="imageUpload">
				确定人脸照片，立即上传
			</el-button>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import md5 from 'blueimp-md5'
	import COS from 'cos-js-sdk-v5'
	
	export default {
		data() {
			return {
				// 上传
				uploadLoading: false, // 上传加载
				suffix: '', // 后缀
				imageFile: '', // 文件内容
				imageName: '', // 文件名字
				imageFileName: '', // 加密后的文件名字
				uploadSign: null, // 获取的后台验证
				face_image: this.href
			}
		},
		props: ['href'],
		watch: {
			href(val) {
				this.face_image = val;
			}
		},
		mounted() {
			this.getUploadToken();
		},
		methods: {
			// 上传
			// 上传之前
			beforeImage(file) {
				let self = this;
				self.imageFile = file;
				self.imageName = md5(JSON.stringify(file)).substring(md5(JSON.stringify(file)).length-16);
				self.suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
				self.imageFileName = `${self.imageName}.${self.suffix}`;
			},
			// 只能上传一个
			onlyImage() {
				let self = this;
				self.$message.error('只能上传一个文件');
			},
			// 点击上传文件
			imageUpload() {
				let self = this;
				self.$refs.uploadImage.submit();
				self.uploadLoading = true;
				let cos = new COS({
					getAuthorization(options, callback) {
						callback({
							TmpSecretId: self.uploadSign.Credentials.TmpSecretId,
							TmpSecretKey: self.uploadSign.Credentials.TmpSecretKey,
							SecurityToken: self.uploadSign.Credentials.Token,
							ExpiredTime: self.uploadSign.ExpiredTime
						});
					}
				});
				cos.putObject({
					Bucket: 'anyuchuzuwu-1301548258',
					Region: 'ap-guangzhou',
					Key: 'firemare/' + self.imageFileName,
					StorageClass: 'STANDARD',
					Body: self.imageFile, // 上传文件对象
				}, function(err, data) {
					console.log(err)
					if (err) {
						self.uploadLoading = false;
						self.$notify.error({
							message: '上传失败'
						});
						return false;
					}
					if(data) {
						self.$notify.success({
							message: '上传成功',
						});
						self.uploadLoading = false;
						self.face_image = 'https://' + data.Location;
						self.$emit('getChildFaceImage', {
							faceImage: self.face_image
						});
					}
				})
			},
			// 重置上传信息，清空face_image
			resetUpload() {
				let self = this;
				self.$refs.uploadImage.clearFiles();
				self.face_image = '';
			},
			
			// 获取上传token
			getUploadToken() {
				let self = this;
				API.cosToken().then(res => {
					self.uploadSign = res.data;
				})
			}
			
		}
	}
</script>

<style>
</style>
